﻿<style scoped>
  .layui-btn:hover {
  }
</style>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding: 5px;">
    <div class="layui-card" style="box-shadow:none;">
    	<div class="layui-card-header">
    		路线列表
			  <div class="layui-btn-group" style="float: right;">
			   	<button type="button" class="layui-btn layui-btn-sm" id="btnAddBizFlightFolder"><i class="layui-icon"></i></button>
			    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon"></i></button>
			  </div>
    	</div>
        <div class="layui-card-body" style="padding:0px;">
        	<ul id="BizFlightTree" class="ztree"></ul>
        </div>
    </div>
</div>


<!-- 表单弹窗   -->
<script type="text/html" id="modelBizFlight">
	<form id="modelBizFlightForm" lay-filter="modelBizFlightForm" class="layui-form model-form" style="padding: 0px;" >
	    	<input name="id" type="hidden"/>
			<input name="sceneId" type="hidden" value="#(sceneId)"/>
			<table class="formTable">
				<tr>
					<td>名称</td>
					<td >
						<input name="name" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td>类型</td>
					<td>
				         <select name="type" lay-filter="type"  lay-verify="required" required>
				      		<option value="0">飞行</option>
							<option value="1">漫游</option>
				    	</select>
					</td>
				</tr>
				<tr>
					<td>序号:</td>
					<td >
						<input name="sort" autocomplete="off"   placeholder="请输入序号" type="number" class="layui-input" maxlength="20"  
                       lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button class="layui-btn layui-btn-sm" lay-filter="submitBizFlightForm" lay-submit>保存</button>
					</td>
				</tr>
			</table>
	</form>    
</script>

<script type="text/html" id="modelBizFlightPoint">
	<form id="modelBizFlightPointForm" lay-filter="modelBizFlightPointForm" class="layui-form model-form" style="padding: 0px;" >
	    	<input name="id" type="hidden"/>
			<input name="sceneId" type="hidden" value="#(sceneId)"/>
			<input name="parentId" type="hidden"/>
			<table class="formTable">
				<tr>
					<td>名称</td>
					<td >
						<input name="name" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td>时间(秒)</td>
					<td >
						<input name="time" placeholder="" autocomplete="off"  type="number" class="layui-input" maxlength="50" lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td>动画</td>
					<td>
				         <select name="animation" lay-filter="animation"  >
							<option value="">--请选择--</option>
				      		<option value="0">绕点飞行</option>
							<option value="1">上下移动</option>
				    	</select>
					</td>
				</tr>
				<tr>
					<td>序号:</td>
					<td >
						<input name="sort" autocomplete="off"   placeholder="请输入序号" type="number" class="layui-input" maxlength="20"  
                       lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button class="layui-btn layui-btn-sm" lay-filter="submitBizFlightPointForm" lay-submit>保存</button>
					</td>
				</tr>
			</table>
	</form>    
</script>

<!-- 点位弹出 -->
<script type="text/html" id="modelForBizFlightFlyPointScript"> 
<div class="layui-fluid" style="padding: 5px;">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
            <div class="layui-form toolbar" id="tbToolBar">
                <div class="layui-form-item">
                    <div class="layui-inline" style="margin-right: 0px;">
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;">
							<div class="layui-input-inline mr0">
								<input name="name" class="layui-input" type="text" placeholder="请输入场景名称"/>
							</div>
						</div>
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;">
							<div class="layui-input-inline mr0">
								<input name="name" class="layui-input" type="text" placeholder="请输入场景名称"/>
							</div>
						</div>
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;">
							<button class="layui-btn icon-btn" lay-filter="formSubSearchForBizFlightFlyPoint" lay-submit>
								<i class="layui-icon">&#xe615;</i>查询
							</button>
						</div>					
					</div>
				</div>
				<table class="layui-table" id="bizPointTableForBizFlightFly" lay-filter="bizPointTableForBizFlightFly"></table>
			</div>
		</div>
	</div>
</div>   
</script>



<!-- js部分 -->
<SCRIPT type="text/javascript">


layui.use(['layer','form','table'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
	var form =layui.form;
	var table =layui.table;
	var setting = {
		async: {
			enable: true,
			url: "#(ctx)/biz/flight/getAsyncTreeData?sceneId=#(sceneId)",
			autoParam:["id", "name=n", "level=lv"],
			dataFilter: filter,
			type: "get"
		},
		view: {
			expandSpeed:"",
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		check: {
			enable: false
		},
		edit: {
			enable: false
		},
		callback: {
		}
		
	};
	
	function filter(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		for (var i=0, l=childNodes.length; i<l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	/**
		添加鼠标事件	
	*/
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if('root'==treeNode.parentId &&  '0'== treeNode.type && !$("#editBizFlightForFlyBtn_"+treeNode.tId).length>0){
			var addStr= "<span class='button edit' id='addBizFlightForFlyBtn_" + treeNode.tId+ "' title='选择点' onfocus='this.blur();'></span>";
			addStr += "<span class='button edit' id='runBizFlightForFlyBtn_" + treeNode.tId+ "' title='执行' onfocus='this.blur();'></span>";
			addStr += "<span class='button edit' id='editBizFlightForFlyBtn_" + treeNode.tId+ "' title='编辑' onfocus='this.blur();'></span>";
			addStr += "<span class='button remove' id='delBizFlightForFlyBtn_" + treeNode.tId+ "' title='删除' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			
			var addBtn = $("#addBizFlightForFlyBtn_"+treeNode.tId);
			if (addBtn) addBtn.bind("click", function(){
				showBizFlightFlyEditModel(treeNode);
				return false;
			});
			
			var runBtn = $("#runBizFlightForFlyBtn_"+treeNode.tId);
			if (runBtn) runBtn.bind("click", function(){
				editMarker.startForFly(treeNode.id);
				return false;
			});
			
			var editBtn = $("#editBizFlightForFlyBtn_"+treeNode.tId);
			if (editBtn) editBtn.bind("click", function(){
				showBizFlightEditModel(treeNode);
				return false;
			});
			
			var delBtn = $("#delBizFlightForFlyBtn_"+treeNode.tId);
			if (delBtn) delBtn.bind("click", function(){
				del(treeNode);
				return false;
			});
		}
		else if('root'!=treeNode.parentId &&  !$("#editBizFlightPointBtn_"+treeNode.tId).length>0){
			
			var addStr= "<span class='button edit' id='editBizFlightPointBtn_" + treeNode.tId+ "' title='编辑' onfocus='this.blur();'></span>";
			addStr += "<span class='button remove' id='delBizFlightPointBtn_" + treeNode.tId+ "' title='删除' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			
			var editBtn = $("#editBizFlightPointBtn_"+treeNode.tId);
			if (editBtn) editBtn.bind("click", function(){
				showBizFlightPointEditModel(treeNode);
				return false;
			});
			
			var delBtn = $("#delBizFlightPointBtn_"+treeNode.tId);
			if (delBtn) delBtn.bind("click", function(){
				del(treeNode);
				return false;
			});
			
		}

	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBizFlightForFlyBtn_"+treeNode.tId).unbind().remove();
		$("#runBizFlightForFlyBtn_"+treeNode.tId).unbind().remove();
		$("#editBizFlightForFlyBtn_"+treeNode.tId).unbind().remove();
		$("#delBizFlightForFlyBtn_"+treeNode.tId).unbind().remove();
		
		$("#editBizFlightPointBtn_"+treeNode.tId).unbind().remove();
		$("#delBizFlightPointBtn_"+treeNode.tId).unbind().remove();
		
	};
	$(document).ready(function(){
		$.fn.zTree.init($("#BizFlightTree"), setting);
	});
		
	$('#btnAddBizFlightFolder').click(function () {
		 showBizFlightEditModel();
	});
	function del(treeNode){
        layer.confirm('确定要删除“【<span style="color:red;">' + treeNode.name + '</span>】”吗？', {
            skin: 'layui-layer-admin',
            shade: .1
        }, function (index) {
            layer.close(index);
            layer.load(2);
	        var res = common_ajax.ajaxFunc(ctx+"/biz/flight/delete",{id:treeNode.id}, "json", null);
	        layer.closeAll('loading');
	        if (200==res.code) {
	            layer.msg(res.message, {icon: 1});
	    		var zTree = $.fn.zTree.getZTreeObj("BizFlightTree");
	    		if(zTree){
					var node =zTree.getNodeByParam("id",treeNode.id);
		    		if(node){
		    			zTree.removeNode(node);
		    		}
	    		}
	            return true;
	        } else {
	            layer.msg(res.message, {icon: 2});
	            return false;
	        }
        }, function (index) {
            layer.close(index);
            return false;
        }); 
	}
	
	//选取飞行点位
	function showBizFlightFlyEditModel(bizFlightData){
        layer.open({
            type: 1,
            title: '选择飞行点位',
            content: $('#modelForBizFlightFlyPointScript').html(),
            area:'500px',
            offset: 't',
            success: function (layero, dIndex) {
           	 	$(layero).children('.layui-layer-content').css('overflow', 'visible');
           	    var bizPointForBizFlightFlyTb = table.render({
           	        elem: '#bizPointTableForBizFlightFly',
           	        url: '#(ctx)/biz/marker/point/listData',
           	        page: true,
           	        cellMinWidth: 100,
           	        where:{
           	        	sceneId:'#(sceneId?sceneId:'')',
           	        	parentId:bizFlightData.id,
           	        },
           	        cols: [[
           	        	{type:'checkbox', event: 'checkbox'},
           	            {field: 'name', sort: false, title: '名称'},
           	            {field: 'code', sort: false, title: '标识'},
           	        ]]
           	    });
                form.on('submit(formSubSearchForBizFlightFlyPoint)', function (data) {
                	bizPointForBizFlightFlyTb.reload({where: data.field}, 'data');
                });
                
                table.on('checkbox(bizPointTableForBizFlightFly)', function (obj){
                	var checked=obj.checked;
                	var data=obj.data;
                	if(checked)	addBizFlightPoint(bizFlightData.id,data);
                	else  del(data);
                });
                
           	 
            }
        });
	}
	
	function addBizFlightPoint(parentId,data){
        layer.load(2);
        var formData={}; 
        formData['bizFlight.id']=data.id;
        formData['bizFlight.sceneId']='#(sceneId)';
        formData['bizFlight.parentId']=parentId;
        formData['bizFlight.name']=data.name;
        var res = common_ajax.ajaxFunc(ctx+"/biz/flight/save",formData, "json", null);
        layer.closeAll('loading'); 
        if (200==res.code) {
            layer.msg(res.message, {icon: 1});
            var newNode=res.data;
			var zTree = $.fn.zTree.getZTreeObj("BizFlightTree");
			if(zTree){
				var node =zTree.getNodeByParam("id",newNode.id);
				if(!node){
					var treeNode =zTree.getNodeByParam("id",newNode.parentId);
					zTree.addNodes(treeNode?treeNode:null, {id:newNode.id, pId:newNode.parentId, name:newNode.name,type:newNode.type});
				}else{
					console.log('节点已经存在，不重复添加!!!');
				}

			}
        } else {
            layer.msg(res.message, {icon: 2});
        }
	}
		
	function showBizFlightEditModel(data){
        layer.open({
            type: 1,
            title: '飞行路线',
            content: $('#modelBizFlight').html(),
            area:'400px',
            offset: 't',
            success: function (layero, dIndex) {
           	 	$(layero).children('.layui-layer-content').css('overflow', 'visible');
           	 	
            	 if(data){
           	 		layer.load(2);
           	 		var res = common_ajax.ajaxFunc(ctx+"/biz/flight/getLayerById",{id:data.id}, "json", null);
           	 	 	layer.closeAll('loading');
           	 		if(200==res.code){
           	 			data=res.data;
           	 		}else{
           	 			layer.close(dIndex);
           	 		 	layer.msg(res.message, {icon: 2});
        	    		var zTree = $.fn.zTree.getZTreeObj("BizFlightTree");
        	    		if(zTree){
        	    			var node =zTree.getNodeByParam("id",data.id);
        	    			if(node){
        	    				zTree.removeNode(node);
        	    			}
        	    		}
           	 		 	return;
           	 		}
           	 	} 
           	 	
                form.val('modelBizFlightForm', data); 
                // 表单提交事件
                form.on('submit(submitBizFlightForm)', function (fData) {
                    if (fData.field.parentId == '') {
                    	fData.field.parentId = 'root';
                    }
                    layer.load(2);
                    var formData={}; 
                    for(var key in fData.field){
                    	formData['bizFlight.'+key]=fData.field[key];
                    }
			        var res = common_ajax.ajaxFunc(ctx+"/biz/flight/save",formData, "json", null);
			        layer.closeAll('loading');
			        if (200==res.code) {
			        	layer.close(dIndex);
			            layer.msg(res.message, {icon: 1});
			            var newNode=res.data;
						var zTree = $.fn.zTree.getZTreeObj("BizFlightTree");
						if(zTree){
							if(!data){
    							var treeNode =zTree.getNodeByParam("id",newNode.parentId);
    							zTree.addNodes(treeNode?treeNode:null, {id:newNode.id, pId:(newNode.parentId?newNode.parentId:'root'),parentId:(newNode.parentId?newNode.parentId:'root'), name:newNode.name,type:newNode.type});
							}else{
								var editNode =zTree.getNodeByParam("id",res.data.id);
								if(editNode){
									editNode.name=res.data.name;
									console.log(editNode);
									zTree.updateNode(editNode);
								}
							}
						}
			        } else {
			            layer.msg(res.message, {icon: 2});
			        }
                    return false;
                });
            	
            }
        });
	}
	
	//编辑飞行点
	function showBizFlightPointEditModel(data){
        layer.open({
            type: 1,
            title: '飞行点',
            content: $('#modelBizFlightPoint').html(),
            area:'400px',
            offset: 't',
            success: function (layero, dIndex) {
           	 	$(layero).children('.layui-layer-content').css('overflow', 'visible');
           	 	
           	 	if(data){
           	 		layer.load(2);
           	 		var res = common_ajax.ajaxFunc(ctx+"/biz/flight/getLayerById",{id:data.id}, "json", null);
           	 	 	layer.closeAll('loading');
           	 		if(200==res.code){
           	 			data=res.data;
           	 		}else{
           	 			layer.close(dIndex);
           	 		 	layer.msg(res.message, {icon: 2});
        	    		var zTree = $.fn.zTree.getZTreeObj("BizFlightTree");
        	    		if(zTree){
        	    			var node =zTree.getNodeByParam("id",data.id);
        	    			if(node){
        	    				zTree.removeNode(node);
        	    			}
        	    		}
           	 		 	return;
           	 		}
           	 	}
           	 	
                form.val('modelBizFlightPointForm', data); 
                // 表单提交事件
                form.on('submit(submitBizFlightPointForm)', function (fData) {
                    if (fData.field.parentId == '') {
                    	fData.field.parentId = 'root';
                    }
                    layer.load(2);
                    var formData={}; 
                    for(var key in fData.field){
                    	formData['bizFlight.'+key]=fData.field[key];
                    }
			        var res = common_ajax.ajaxFunc(ctx+"/biz/flight/save",formData, "json", null);
			        layer.closeAll('loading');
			        if (200==res.code) {
			        	layer.close(dIndex);
			            layer.msg(res.message, {icon: 1});
			            var newNode=res.data;
						var zTree = $.fn.zTree.getZTreeObj("BizFlightTree");
						if(zTree){
							if(!data){
    							var treeNode =zTree.getNodeByParam("id",newNode.parentId);
    							zTree.addNodes(treeNode?treeNode:null, {id:newNode.id, pId:newNode.parentId?newNode.parentId:'root', name:newNode.name,type:newNode.type});
							}else{
								var editNode =zTree.getNodeByParam("id",res.data.id);
								if(editNode){
									editNode.name=res.data.name;
									console.log(editNode);
									zTree.updateNode(editNode);
								}
							}
						}
			        } else {
			            layer.msg(res.message, {icon: 2});
			        }
                    return false;
                });
            	
            }
        });
	}
	
});

var _Ajax = function(reqType, url, data, dataType, callback) {
	$.ajax({
		type: reqType,
		url: encodeURI(encodeURI(url)),
		data: data,
		dataType: dataType ? dataType : 'html',
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		async: false,
		cache: false,
		success: function(response) {
			if (callback != null) {
				callback(response);
			}
		}
	});
}


	
</SCRIPT>